<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .selected{
            background-color: #528bcb;
            color: #ffffff;
            border-bottom: 1px solid #fff;
        }
    </style>
    <script>
        window.onload=function(){
            function $(select){
                return document.querySelectorAll(select)
            }
            function all(isSelected,cName){
                $('input').forEach((item,index)=>{
                    item.checked=isSelected
                })
                $('li').forEach((item,index)=>{
                    item.className=cName
                })
            }
            $('button')[0].onclick=function(){
                all(true,'selected')
            }
            $('button')[1].onclick=function(){
                $('input').forEach((item,index)=>{
                    item.checked?item.checked=false:item.checked=true
                })
              
            }
            $('button')[2].onclick=function(){
                all(false,'')
            }
        }
    </script>
</head>
<body>
    <button>全选</button>
    <button>反选</button>
    <button>取消</button>

    <ul>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
    </ul>
</body>
</html>